<template>
	<view class="my">
		<navbar class="my-navbar" mode="normalDrawer" title="我的"  @drawer="drawer"></navbar>
		<view class="my-content" v-if="canshow">
			<view class="my-head">
				<view class="head-top" @click="toInfo">
					<image class="head-user_head" mode="aspectFill" :src="nowUser.headImagePath"></image>
					<view class="head-text">
						<text class="text-name">
							{{nowUser.name}}
						</text> 
						<text class="text-id">
							用户id：{{nowUser.id}}
						</text>
					</view>
					<uni-icons type="gear-filled" size="26" color="#fff" class="head-icon" @click="checkSetting">
					</uni-icons>
				</view>
				<view class="head-bottom">
					<view class="bottom-item">
						<view class="item-para">关注店铺</view>
						<view class="item-title">{{followStoreList.length}}</view>
					</view>
					<view class="bottom-item">
						<view class="item-para">足迹</view>
						<view class="item-title">{{historyList.length}}</view>
					</view>
					<view class="bottom-item">
						<view class="item-para">红包卡券</view>
						<view class="item-title">0</view>
					</view>
				</view>
			</view>
			<view class="my-body">
				<view class="body-cards">
					<my-card-1 :items="cardItems1" class="c1"></my-card-1>
					<my-card-2 class="c2"></my-card-2>
				</view>
			</view>
		</view>
		<uni-drawer ref="showDrawer">
			<drawer @exit="exit"></drawer>
		</uni-drawer>
		<uni-popup type="bottom" ref="pop_exit">
			<view class="box">
				<view class="text">确定要退出登录吗？</view>
				<view class="confirm" @click="exitC">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenW: 0,
				screenH: 0,
				nowUser: {},
				followUserList: [],
				followStoreList: [],
				postList: [],
				historyList: [],
				canshow:false,
				cardItems1: [{
						title: "会员中心",
						src: "/static/logo.png"
					},
					{
						title: "我的商品",
						src: "/static/logo.png"
					},
					{
						title: "收货地址",
						src: "/static/logo.png",
						page:"/pages/user-address/user-address"
					},
					{
						title: "超级玩家",
						src: "/static/logo.png"
					}
				]
			}
		},
		onLoad() {
			this.screenW = this.$screenWidth
			this.screenH = this.$screenHeight
			var user = uni.getStorageSync("user")
			user.headImagePath = this.$urlPrefix + user.headImagePath
			this.nowUser = user
			///console.log(this.nowUser);
			this.followUserList = user.followUserList
			this.followStoreList = user.followStoreList
			this.historyList = user.historyList
			this.postList = user.postList
			this.canshow = true
		},
		methods: {
			exitC(){
				uni.clearStorage()
				this.$refs.pop_exit.close()
				uni.showToast({
					title:"退出登录成功~即将返回登录页"
				})
				setTimeout(function(){
					uni.hideToast()
					uni.redirectTo({
						url:"../../login/login"
					})
				},1000)
			},
			exit(){
				this.$refs.showDrawer.close()
				this.$refs.pop_exit.open()
			},
			drawer(){
				this.$refs.showDrawer.open()
			},
			checkSetting() {
				console.log("点击设置");
			},
			toInfo(){
				uni.navigateTo({
					url:"/pages/user-info/user-info?id="+this.nowUser.id
				})
			}
		},
		onShow() {
			uni.showLoading({})
			var vue = this
			vue.canshow = false
			setTimeout(function() {
				vue.canshow = true
				uni.hideLoading()
			}, 1)
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		width: 100%;
	}
	.my {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		//border: 2rpx blue solid;
		.box{
			width: 100%;
			height: 400rpx;
			background-color: #Fff;
			border-radius: 40rpx;
			//border: 4rpx red solid ;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: relative;
			.text{
				font-size: 40rpx;
				position: relative;top: -40rpx;
			}
			.confirm{
				font-size: 32rpx;
				position: absolute;
				bottom: 120rpx;
				right: 80rpx;
				color: $my-main-color;
			}
		}
		
		.my-content {
			height: 100%;
			//border: 2rpx red solid;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.my-head {
				//border: 2rpx red solid;
				display: flex;
				flex-grow: 1;
				flex-direction: column;
				position: relative;
				width: 100%;
				box-sizing: border-box;
				background-color: $my-main-color;

				.head-top {
					display: flex;
					flex-direction: row;
					padding: 20rpx;
					position: relative;

					.head-user_head {
						width: 160rpx;
						height: 160rpx;
						border-radius: 80rpx;
					}

					.head-icon {
						position: absolute;
						right: 20rpx;
						top: 20rpx;
					}

					.head-text {
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						height: 160rpx;
						justify-content: center;

						text {
							color: #fff;
						}

						.text-name {
							font-size: 50rpx;
							font-weight: bold;
							width: 300rpx;
							overflow: hidden;
						}

						.text-id {
							margin-top: 10rpx;
							font-size: 24rpx;
						}
					}
				}

				.head-bottom {
					position: absolute;
					bottom: 40rpx;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					box-sizing: border-box;

					.bottom-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						flex-grow: 1;

						view {
							color: #Fff;
							font-size: 32rpx;
						}
					}
				}
			}

			.my-body {
				//border: 2rpx green solid;
				flex-grow: 2;
				padding: 20rpx;
				background-color: #ebebeb;
				display: flex;
				flex-direction: column;

				.body-cards {
					display: flex;
					flex-direction: column;
					
					height: 100%;
					position: relative;
					top: -40rpx;
					
					.c1{
						flex-grow: 1;
					}
					
					.c2{
						flex-grow: 3;
					}
				}
			}
		}
	}
</style>
